<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" bottom="90rpx">

			<view class="invoiceTitleWrapper">
				<view class="invoiceTitleItem" v-for="(item, index) in invoiceTitleLists" :key="item.invoiceTitleId"
					@click="chooseInvoiceTitle(item, index)">
					<view class="content">
						<text>发票抬头类型: {{item.invoiceTitleType|invoiceTitleType}}</text>
						<text>发票抬头: {{item.invoiceTitleName}}</text>
					</view>

					<u-icon v-if="currentIndex == index" color="#009CF9" name="checkmark-circle-fill" size="16"></u-icon>
					<u-icon v-else name="checkmark-circle" size="16"></u-icon>
				</view>

			</view>
		</mescroll-body>

		<view class="bottomBtn" @click="confimInvoiceTitle">
			{{invoiceTitleLists.length > 0 ? '确定' : '添加发票抬头'}}
		</view>
	</view>
</template>

<script>
	import {
		invoiceTitleList,
	} from '@/api/invoice-api.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				invoiceTitleLists: [],
				currentInvoiceTitle: null,
				currentIndex:-1
			}
		},
		onLoad() {
             uni.$on('refreshInvoiceTitleList', () => {
             	this.mescroll.triggerDownScroll();
             })
		},
		methods: {
			upCallback(page) {
				invoiceTitleList({
					pageNo: page.num,
					pageSize: page.size
				}).then(res => {
					this.mescroll.endSuccess(res.data.length);
					//设置列表数据
					if (page.num == 1) this.invoiceTitleLists = []; //如果是第一页需手动制空列表
					this.invoiceTitleLists = this.invoiceTitleLists.concat(res.data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			chooseInvoiceTitle(item, index) {
				this.currentIndex = index;
				this.currentInvoiceTitle = item;
				
			},
			confimInvoiceTitle() {
				if(this.invoiceTitleLists.length > 0) {
					if(this.$u.test.isEmpty(this.currentInvoiceTitle)) {
						this.$u.toast('请选择发票抬头')
						return 
					}
					uni.$emit('selectedInvoiceTitle', this.currentInvoiceTitle);
					uni.navigateBack({
					
					})
				}else {
					uni.navigateTo({
						url:'./invoice-header-add'
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invoiceTitleWrapper {
		padding: 20upx 20upx 100upx;

		.invoiceTitleItem {
			padding: 35upx;
			border-radius: 16upx;
			background-color: $bg-white-color;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10upx;
			.content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				text {
					color: $text-color-33;
					font-size: 28upx;
					font-weight: bold;
				}

				text:nth-child(1) {
					margin-bottom: 26upx;
				}
			}

			.arrow {
				position: absolute;
				right: 20upx;
				top: 40upx;
			}
		}

	}

	.bottomBtn {
		margin: 0 20upx;
		position: fixed;
		bottom: 20upx;
		width: 710upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		color: $text-color-ff;
		font-size: 30upx;
		font-weight: bold;
		background: linear-gradient(to right, #32ace9 0%, #176cfb 100%);
		border-radius: 10upx;
	}
</style>
